<!DOCTYPE html>
<html>
  <head>
    <title>SnapAxis Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <style>
      #app {
        font-family: sans-serif;
        text-align: center;
        font-size: 12px;
      }

      .container {
        height: 100px;
        position: relative;
        margin: 0 auto;
        user-select: none;
        width: 700px;
      }

      .tickWarp {
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .tick {
        height: 5px;
        position: "relative";
        border-bottom: 1px solid #757575;
      }

      .tickItem {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1px;
        height: 5px;
        background-color: #757575;
      }

      .dragBox {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 40px;
        background-color: #0307f2;
        opacity: 0.3;
      }

      .snappedLabel {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        font-size: 12px;
        color: #a3a3a3;
        text-align: left;
      }

      .setting {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        color: #a3a3a3;
      }

      .setting label {
        display: flex;
        align-items: center;
      }

      .setting input {
        margin: 0;
        padding: 0;
      }
    </style>
    <div id="app">
      <div class="container" id="demo02">
        <div class="snappedLabel" id="snappedLabel" style="display: none"></div>
        <div class="setting">
          <label>
            禁用吸附：
            <input type="checkbox" id="disableSnap" />
          </label>
        </div>
        <div class="tickWarp">
          <div class="tick" id="tick"></div>
        </div>
        <div class="dragBox" id="dragBox"></div>
      </div>
    </div>

    <script src="https://unpkg.com/snap-axis@latest/umd/snap-axis.min.js"></script>
    <script>
      const TickWidth = 700;
      const BoxWidth = 60;

      // 随机生成刻度
      function randomRange(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      const tickValues = [0, TickWidth, TickWidth / 2];
      for (let i = 0; i < 10; i++) {
        tickValues.push(randomRange(0, TickWidth));
      }
      tickValues.sort((a, b) => a - b);

      // 初始化 SnapAxis
      const snapAxis = new SnapAxis({
        snapValues: tickValues.map((value, idx) => ({
          id: `snap_${idx}`,
          value,
        })),
      });

      // 渲染刻度
      const tickEl = document.getElementById("tick");
      tickEl.style.width = TickWidth + "px";
      tickValues.forEach((value) => {
        const div = document.createElement("div");
        div.className = "tickItem";
        div.style.left = value + "px";
        tickEl.appendChild(div);
      });

      // 拖拽逻辑
      let value = 0;
      let disableSnap = false;
      const dragBox = document.getElementById("dragBox");
      dragBox.style.width = BoxWidth + "px";
      dragBox.style.left = value + "px";

      const snappedLabel = document.getElementById("snappedLabel");
      const disableSnapInput = document.getElementById("disableSnap");

      function getSnapGroup(val) {
        return [val, val + BoxWidth / 2, val + BoxWidth];
      }

      function updateUI() {
        // 检查是否吸附
        let isSnapped = false;
        let snappedValues = [];
        const snapGroup = getSnapGroup(value);
        for (let i = 0; i < snapGroup.length; i++) {
          const v = snapGroup[i];
          if (snapAxis.checkSnapped(v)) {
            isSnapped = true;
            snappedValues = snapAxis.getSnappedValues(v);
            break;
          }
        }
        dragBox.className = "dragBox" + (isSnapped ? " snapped" : "");
        dragBox.style.left = value + "px";

        if (isSnapped && snappedValues.length) {
          dragBox.style.backgroundColor = "red";
          snappedLabel.style.display = "";
          snappedLabel.innerHTML =
            `<div>Snapped Values:</div>` +
            snappedValues.map((item) => `id=${item.id}, value=${item.value}`).join("<br>");
        } else {
          dragBox.style.backgroundColor = "";
          snappedLabel.style.display = "none";
          snappedLabel.innerHTML = "";
        }
      }

      dragBox.addEventListener("mousedown", (e) => {
        const snapGroup = getSnapGroup(value);
        // 获取吸附更新器
        const updater = snapAxis.getSnapGroupUpdater(snapGroup, e.clientX, {
          distance: 5,
          disableSnap,
        });

        function onMouseMove(e) {
          // 计算拖动偏移量
          const result = updater(e.clientX);
          const values = result.values;
          value = Math.max(0, Math.min(TickWidth, values[0]));
          updateUI();
        }

        function onMouseUp() {
          document.removeEventListener("mousemove", onMouseMove);
          document.removeEventListener("mouseup", onMouseUp);
          document.body.style.cursor = "";
        }

        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", onMouseUp);
        document.body.style.cursor = "move";
      });

      disableSnapInput.addEventListener("change", (e) => {
        disableSnap = e.target.checked;
      });

      updateUI();
    </script>
  </body>
</html>
